<template>

	<view class="content">
		<view  class="topSticky">
		<!-- 搜索 -->
			<view  class="topStickySearch">
				<u-search :disabled="true" @click="searchClick" height="35" placeholder="请输入线路或目的地" bgColor="#fff" :actionStyle="searchStyle" :showAction="true" ></u-search>
			</view>
		</view>
		<view class="bodyContent">
		<!-- 滚动通知 -->
		<view class="notice">
		  <u-notice-bar customStyle="border-radius:40rpx; background:#8cd1bf;" color="#fff" duration="5000" :step="true" :text="noticeList"></u-notice-bar>
		</view>
		

		
		<!-- 幻灯片 -->
		<view>
			<u-swiper
					:list="swiperList"
					:indicator="true"
					height="170"
					@change=""
					@click=""
			></u-swiper>
		</view>
		
<!-- 		<view class="flex promotion">
			<view @click="leftBannerClick"><u--image radius="5" width="340rpx" height="170rpx" :showLoading="true" :src="srcLeft" @click=""></u--image></view>
			<view @click="rightBannerClick"><u--image radius="5" width="340rpx" height="170rpx" :showLoading="true" :src="srcRight" @click=""></u--image></view>
		</view> -->
		<view @click="bottomBannerClick" class="promotion">
			<u--image radius="5" mode='scaleToFill' width="100%" height="140rpx" :showLoading="true" :src="srcButton" @click=""></u--image>
		</view>
		<!-- 商品分类 -->
		<view class="goodsCategory">
			<u-tabs
			:list="goodsCategory"
			 @click="goodsCategoryClick"
			lineWidth="20"
			lineHeight="7"
			    :lineColor="lineColor"
			    :activeStyle="{
			        color: '#303133',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }"
			    :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }"
			    itemStyle="padding-left: 25rpx; padding-right: 25rpx; font-size:25rpx; height: 34px; color:#626365;"
			></u-tabs>
		</view>
		<view class="goodsList ">
			<view class="goodsRow" v-for="(item,gindex) in goodsList" :key="gindex" @click="goodsInfo" :data-id="item.id">
				<view class="goodsListImg">
					<u--image radius="6" :src="item.image" width="333rpx" height="370rpx" :showLoading="true"  @click=""></u--image>
				</view>
				<view class="goodsTitle">
					<view>{{item.title}}</view>
				</view>
				<view>
					<view class="vipPriceBlock">
						<view class="vipPriceBlockZero">￥{{item.vipprice ? item.vipprice : 0.00}}</view><view class="vipPriceBlockText">会员价</view>
					</view>
					<view class="saleInfo">
						<view class="oldPrice">￥{{item.price}}</view>
						<view class="sellInfo">已售<view class="sellCount">{{item.show_buyer_count}}</view></view>
					</view>
				</view>
			</view>
		</view>
		<buttonNav :active="active"></buttonNav>
		</view>
	</view>
</template>

<script>
	import http from "@/apis/http.js";
	import buttonNav from '@/components/bottomNav.vue';
	import base from '@/config/base.js'
	export default {
		components:{
			buttonNav
		},
		data() {
			return {
				active:0,
				page:0,
				searchStyle:{
					'color':'#fff',
					'padding':'10rpx',
					'border-radius':'50rpx',
					'position':'absolute',
					'right':'160rpx',
					'background':'#5db9a0',
					'height':'25rpx',
					'line-height':'25rpx',
					'margin-right':'40rpx',
				},
				noticeList:[
					'用户131****5479开通会员','用户135****4750开通会员',
					'用户137****7767开通会员','用户151****2550开通会员',
					'用户133****7237开通会员','用户137****767开通会员',
					'用户136****9654开通会员','用户151****0520开通会员',
				],
				swiperList:[],
				srcLeft: '',
				srcRight:'',
				srcButton:'',
				goodsCategory:[],
				goodsCategoryId:0,
				goodsList:[],
				goodsListType : 1, //1 直接重置  2追加 
				lineColor:`url('`+base.baseUrl+`assets/img/web/swiper_btn.png') 100% 100%`,
			}
		},
		onLoad() {
			this.getConfig();
			this.getGoodsCategoryList();
			this.getGoodsList();
			
		},
		methods: {
			getConfig(){
				http.POST('index/systemInfo').then(res=>{
					this.swiperList = res.data.swiperList;
					this.srcLeft = res.data.srcLeft;
					this.srcRight = res.data.srcRight;
					this.srcButton = res.data.srcButton;
				})
			},
			goodsCategoryClick(item) {
				this.goodsCategoryId=item.id
				this.page = 0;
				this.goodsListType = 1;
				this.getGoodsList();
			},
			getGoodsCategoryList(){
				http.POST('goods/categoryList').then(res=>{
					this.goodsCategory = res.data
				})
			},
			getGoodsList(){ 
				http.POST('goods/goodsList',{type:this.goodsCategoryId,'page':this.page}).then(res=>{
					if(this.goodsListType == 1){
						this.goodsList = res.data
					}else{
						this.goodsList.push(...res.data)
					}
				})
			},
			searchClick(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			goodsInfo(v){
				let id = v.currentTarget.dataset.id;
				console.log(id)
				uni.navigateTo({
					url:'/pages/goods/goods?goodsId='+id
				})
			},
			leftBannerClick(){
				uni.navigateTo({
					url:'/pages/vipCard/buyVip'
				})
			},
			rightBannerClick(){
				uni.navigateTo({
					url:'/pages/distribution/distribution'
				})
			},
			bottomBannerClick(){
				
			}
		},
		onReachBottom (){
			this.page++;
			this.goodsListType = 2;
			this.getGoodsList()
			
		}
	}
</script>

<style>
	.content { 
		background-color: #f6f7f9;min-height: 1000rpx;
		padding-bottom: calc(var(--window-bottom) + 150rpx);
	}
	.topSticky{
		position: sticky;  top:0; z-index: 1000;
		background-color: #5db9a0;
		padding: 100rpx 0 8rpx 35rpx;

	} 
	.flex{display: flex; justify-content: space-between;}
	.promotion{margin: 20rpx 0;}
	.notice { margin: 20rpx 0;}
	.goodsCategory { margin: 15rpx 0;}
	.topStickySearch { width: 530rpx;margin-bottom: 10rpx;}
	.bodyContent{ padding: 0 30rpx;}
	.goodsList { display: flex; flex-wrap: wrap;  margin-top: 20rpx; min-height: 300rpx; justify-content: space-between; }
	.goodsListImg {max-width: 300rpx; margin-bottom: 25rpx;}
	.goodsTitle { margin: 8rpx 0; color: #232323; padding: 0 15rpx; font-size: 30rpx;}
	.vipPriceBlock {display: flex; margin: 7rpx 0;  padding: 0 15rpx;}
	.vipPriceBlockZero { color: #5db6a4; font-weight: bolder; }
	.vipPriceBlockText {
		font-size: 14rpx; height: 30rpx; line-height: 30rpx; 
		margin-left: 8rpx; padding: 2rpx 15rpx; color: #fff; background: #5db6a4; 
		border-radius: 0 50rpx 50rpx 50rpx;
		/* #ifdef MP-WEIXIN */
		margin-top: 10rpx;
		/* #endif */
	}
	.saleInfo { display: flex; justify-content: space-between; padding: 15rpx 15rpx; }
	.oldPrice {text-decoration: line-through; color: black;}
	.sellInfo { margin-left: 20rpx; display: flex; font-weight: bold; color: #6e6e6e;}
	.saleInfo{font-size: 25rpx;}
	.sellCount { }
	.goodsRow {width: 334rpx; margin-bottom: 20rpx; 
	 border:1px solid #eeeeee; box-shadow: 0 0 4rpx 3rpx #eeeeee;
	 border-radius: 20rpx;
	 }
	 
	 
	 .buttomBannerStyle {
		 margin-top: 15rpx;
	 }
</style>

	